<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="stylesheet" href="${APP_PATH}/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="${APP_PATH}/css/font-awesome.min.css">
    <link rel="stylesheet" href="${APP_PATH}/css/main.css">
    <style>
        .tree li {
            list-style-type: none;
            cursor:pointer;
        }
        table tbody tr:nth-child(odd){background:#F4F4F4;}
        table tbody td:nth-child(even){color:#C00;}
    </style>
</head>

<body>

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <div><a class="navbar-brand" style="font-size:32px;" href="#">众筹平台 - 角色维护</a></div>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <%@ include file="/WEB-INF/jsp/common/top.jsp"%>
            </ul>
            <form class="navbar-form navbar-right">
                <input type="text" class="form-control" placeholder="Search...">
            </form>
        </div>
    </div>
</nav>

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
            <jsp:include page="/WEB-INF/jsp/common/menu.jsp"></jsp:include>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title"><i class="glyphicon glyphicon-th"></i> 数据列表</h3>
                </div>
                <div class="panel-body">
                    <form class="form-inline" role="form" style="float:left;">
                        <div class="form-group has-feedback">
                            <div class="input-group">
                                <div class="input-group-addon">查询条件</div>
                                <input class="form-control has-success" type="text" placeholder="请输入查询条件">
                            </div>
                        </div>
                        <button type="button" class="btn btn-warning"><i class="glyphicon glyphicon-search"></i> 查询</button>
                    </form>
                    <button type="button" class="btn btn-danger" style="float:right;margin-left:10px;"><i class=" glyphicon glyphicon-remove"></i> 删除</button>
                    <button type="button" class="btn btn-primary" style="float:right;" onclick="window.location.href='${APP_PATH}/role/toAdd.htm'"><i class="glyphicon glyphicon-plus"></i> 新增</button>
                    <br>
                    <hr style="clear:both;">
                    <div class="table-responsive">
                        <table class="table  table-bordered">
                            <thead>
                            <tr >
                                <th width="30">#</th>
                                <th width="30"><input type="checkbox" id="allCheckBox"></th>
                                <th>名称</th>
                                <th width="100">操作</th>
                            </tr>
                            </thead>
                            <tbody>

                            </tbody>
                            <tfoot>
                            <tr >
                                <td colspan="6" align="center">
                                    <ul id="foot" class="pagination">

                                    </ul>
                                </td>
                            </tr>

                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="${APP_PATH}/jquery/jquery-2.1.1.min.js"></script>
<script src="${APP_PATH}/bootstrap/js/bootstrap.min.js"></script>
<script src="${APP_PATH}/script/docs.min.js"></script>
<script type="text/javascript" src="${APP_PATH }/jquery/layer/layer.js"></script>
<script type="text/javascript">
    $(function () {
        $(".list-group-item").click(function(){
            if ( $(this).find("ul") ) {
                $(this).toggleClass("tree-closed");
                if ( $(this).hasClass("tree-closed") ) {
                    $("ul", this).hide("fast");
                } else {
                    $("ul", this).show("fast");
                }
            }
        });
        showMenu()
        queryPageRole(1)
    });

    $("tbody .btn-success").click(function(){
        window.location.href = "assignPermission.html";
    });

    var loadingIndex = -1

    var jsonObj = {
        "pageNo": 1,
        "pageSize": 10
    }

    function queryPageRole(pageno){
        var tbody = $("tbody")
        tbody.empty()
        jsonObj.pageNo = pageno
        $.ajax({
            type: 'POST',
            data: jsonObj,
            url: "${APP_PATH}/role/doIndex.do",
            beforeSend: function(){
                loadingIndex = layer.load(2,{time: 10*1000})
                return true;
            },
            success: function(result){

                layer.close(loadingIndex)

                if(result.success){
                    var page = result.page;
                    var data = page.datas;

                    $.each(data,function(index,value){
                        var content = ''
                        content += '<tr>';
                        content += '	<td>'+(index + 1)+'</td>';
                        content += '	<td><input class="checkBtn" type="checkbox" id="'+value.id+'"></td>';
                        content += '	<td>'+ value.name +'</td>';
                        content += '	<td>';
                        content += '		<button type="button" class="btn btn-success btn-xs assignBtn" id="'+value.id+'"><i class=" glyphicon glyphicon-check"></i></button>';
                        content += '		<button type="button" class="btn btn-primary btn-xs updateBtn" id="'+value.id+'"><i class=" glyphicon glyphicon-pencil"></i></button>';
                        content += '		<button type="button" class="btn btn-danger btn-xs deleteBtn"><i class=" glyphicon glyphicon-remove"></i></button>';
                        content += '	</td>';
                        content += '</tr>';
                        tbody.append(content)
                    });

                    var foot = '';

                    if(page.pageNo == 1){
                        foot += '<li class="disabled"><a href="#">上一页</a></li>'
                    }else{
                        foot += '<li><a href="#" onclick="pageChange(' + (page.pageNo - 1) + ')">上一页</a></li>'
                    }

                    for(var i = 1; i <= page.totalNo; i++ ){
                        foot += '<li';
                        foot += page.pageNo === i ? ' class="active"' : ' '
                        foot += '><a href="#" onclick="pageChange('+i+')">'+i+'</a></li>'
                    }

                    if(page.totalNo == page.pageNo){
                        foot += '<li class="disabled"><a href="#">下一页</a></li>'
                    }else{
                        foot += '<li><a href="#" onclick="pageChange(' + (page.pageNo + 1) + ')">下一页</a></li>'
                    }
                    $("#foot").html(foot)
                }else{
                    layer.msg(result.message,{time: 1000,icon: 5,shift:6})
                }
            },
            error: function(result){
                layer.msg(result.message,{time: 1000,icon: 5,shift:6})
            }
        })
    }

    $(document).on('click',".updateBtn",function(){
        var id = this.id
        window.location.href = "${APP_PATH}/role/toUpdate?id="+id

    })

    $(document).on('click','.assignBtn',function(){
        window.location.href = "${APP_PATH}/role/toAssignPermission.htm?roleid="+this.id
    })

    $("#allCheckBox").click(function(){
        var status = $(this).prop('checked')
        $(".checkBtn").prop('checked',status)
    })

    $(document).on('click',".checkBtn",function(){
        if(this.checked == false){
            $("#allCheckBox").prop('checked',false);
        }

        var count = 0;
        var checkedBoxs = $(".checkBtn")
        $.each(checkedBoxs,function(index,item){
            if($(item).prop('checked')){
                count++;
            }
        })

        if(count === checkedBoxs.length){
            $("#allCheckBox").prop('checked',true);
        }
    })
</script>
<script type="text/javascript" src="${APP_PATH}/script/menu.js"></script>
</body>
</html>

